import NoneLayout from '@/layout/NoneLayout'
import { useRef, useState } from 'react'
import styles from './imageUpscale.module.scss'
import ImageUpscaleLeftContent, {
  ImageInfo,
} from '@/views/imageUpscale/ImageUpscaleLeftContent'
import ImageUpscaleRightContent from '@/views/imageUpscale/ImageUpscaleRightContent'
import { showToast } from '@/utils/toast'
import ImageUpscaleManager from '@/lib/imageUpscale/ImageUpscaleManager'
import { RunBack } from '@/lib/imageUpscale//types'
import ImageUpscaleFAQ from '@/views/imageUpscale/ImageUpscaleFAQ'
import { MessageBox } from '@/utils/messageBox'
import { isMobile } from '@/utils/adaptation'
import {
  imageUpscaleConfigStore,
  UpscaleModelConfig,
} from '@/store/imageUpscaleConfig'

export default function Page() {
  const [upscaleConfig, setUpscaleConfig] = useState<UpscaleModelConfig>(
    imageUpscaleConfigStore.value
  )

  const imageInfo = useRef<ImageInfo>(null)
  const [showMobileConfig, setShowMobileConfig] = useState(false)
  const [showFAQ, setShowFAQ] = useState(false)

  const onConfigChange = (config: UpscaleModelConfig) => {
    setUpscaleConfig(config)
  }
  const onUploadImage = (info: ImageInfo) => {
    imageInfo.current = info
  }
  const onStartUpscale = async () => {
    if (!imageInfo.current) {
      showToast('请先上传图片')
      return
    }
    if (!upscaleConfig) {
      showToast('请先选择模型')
      return
    }
    if (!ImageUpscaleManager.getReady()) {
      showToast('程序加载中，请稍后')
      if (isMobile()) {
        setShowMobileConfig(true)
      }
      return
    }
    if (
      upscaleConfig.backend === RunBack.webgl &&
      upscaleConfig.blockSize > 72
    ) {
      let flag = await MessageBox.propt(
        '警告',
        'WebGL模式下，blockSize不建议大于72,有内存溢出（OOM）的风险,是否继续？',
        {
          cancelText: '修改一下',
          confirmText: '无视警告',
        }
      )
      if (!flag) return
    }
    ImageUpscaleManager.predict({
      blockSize: upscaleConfig.blockSize,
      modelQueue: [upscaleConfig.model],
      width: imageInfo.current.width,
      height: imageInfo.current.height,
      imageData: imageInfo.current.bytes,
      channels: imageInfo.current.channels,
    })
    // ImageUpscaleManager.event.once('predictResult', (data) => {
    // })
  }

  return (
    <div className={styles['background']}>
      <div className={styles['eff1']}></div>
      <div className={styles['eff2']}></div>
      <div className={styles['left-content']}>
        <div className={styles['left-content-wapper']}>
          <header className={styles['header']}>
            <div className={styles['title-wapper']}>
              <h1 className={styles['title']}>Image Upscale</h1>
              <div className={styles['title-desc']}>超分辨放大图片</div>
            </div>
            <svg
              onClick={() => setShowMobileConfig(!showMobileConfig)}
              className={styles['mobile-more-btn']}
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="12931"
              width="200"
              height="200">
              <path
                d="M919.83872 64.55808 103.939072 64.55808c-21.646336 0-39.360512 17.713152-39.360512 39.315456l0 815.942656c0 21.691392 17.714176 39.40352 39.360512 39.40352l815.899648 0c21.64736 0 39.359488-17.713152 39.359488-39.40352L959.198208 103.873536C959.197184 82.271232 941.485056 64.55808 919.83872 64.55808zM334.495744 588.93824 180.263936 588.93824 180.263936 434.751488l154.232832 0L334.496768 588.93824zM592.868352 588.93824 438.634496 588.93824 438.634496 434.751488 592.868352 434.751488 592.868352 588.93824zM851.241984 588.93824 697.007104 588.93824 697.007104 434.751488l154.233856 0L851.24096 588.93824z"
                p-id="12932"
                fill="#a3b2c1"></path>
            </svg>
          </header>
          <ImageUpscaleLeftContent
            config={upscaleConfig}
            onStartUpscale={onStartUpscale}
            onUploadImage={onUploadImage}
            onOpenMobileConfig={() => setShowMobileConfig(true)}
          />
          <svg
            onClick={() => setShowFAQ(!showFAQ)}
            className={styles['faq-logo']}
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3480"
            width="200"
            height="200">
            <path
              d="M510.671237 62.821791c-247.146866 0-447.515337 200.361307-447.515337 447.509197 0 247.153006 200.36847 447.51329 447.515337 447.51329 247.14789 0 447.508173-200.360284 447.508173-447.51329C958.17941 263.183098 757.819127 62.821791 510.671237 62.821791zM265.56996 520.549723 265.56996 295.868521c0-16.946974 13.685697-30.632671 30.631648-30.632671l224.682225 0c16.946974 0 30.632671 13.685697 30.632671 30.632671l0 224.681202c0 16.945951-13.685697 30.630624-30.632671 30.630624L296.202631 551.180348C279.255657 551.180348 265.56996 537.495674 265.56996 520.549723zM755.765351 724.793454c0 16.959254-13.678534 30.635741-30.637788 30.635741L500.458641 755.429195c-16.95209 0-30.637788-13.676487-30.637788-30.635741L469.820853 571.606563l71.483054 0c16.95209 0 30.637788-13.684674 30.637788-30.631648l0-71.495334 153.184845 0c16.959254 0 30.637788 13.690814 30.637788 30.643927L755.764328 724.793454zM499.191788 482.500129c-1.738597-1.638313-5.41022-3.683902-10.82658-6.434549-5.41022-2.558265-10.519588-5.41636-15.008832-8.275477 12.764722-15.014972 19.294438-35.542494 19.294438-61.48126 0-17.055444-3.15997-31.866778-9.592472-44.425815-6.331195-12.656251-15.732309-22.363334-28.189016-29.207206-12.45773-6.945179-27.371394-10.417257-44.528146-10.417257-12.764722 0-24.102954 1.943258-34.213219 5.723352-10.007935 3.876284-18.481933 9.29162-25.52842 16.33913-6.945179 7.14984-12.253068 15.72617-15.929808 25.837458-3.676739 10.212596-5.41636 21.236674-5.41636 33.291221 0 11.946077 1.739621 22.978341 5.41636 33.190937 3.575432 10.212596 8.984628 18.896372 16.134469 26.244734 7.142677 7.252171 16.134469 13.07683 26.654057 16.84976 10.519588 3.984754 22.363334 5.921873 35.742039 5.921873 16.236799 0 30.127158-2.039449 41.46539-6.325056 5.41022 3.773953 10.519588 7.143701 15.315824 10.207479 4.598738 2.660596 8.582469 4.903683 12.156878 6.54302 3.473101 1.426489 6.332219 2.14178 8.883321 2.14178 2.864234 0 5.51869-1.125637 7.661494-2.960425 2.14178-2.251274 3.261277-4.290723 3.261277-6.228865C501.942435 486.170728 500.925269 484.027925 499.191788 482.500129zM458.341405 430.310489c-2.346441 7.66047-6.024204 14.190187-11.133571 19.606547-17.567098-12.150738-30.024827-18.174941-37.378306-18.174941-2.552126 0-4.796236 0.913812-6.734378 2.654456-2.046612 1.943258-2.967588 4.079922-2.967588 6.228865 0 2.961448 0.920976 5.006014 3.165086 6.432503 2.046612 1.63729 6.031367 3.677762 11.850909 6.331195 5.716188 2.76395 10.513448 5.51869 14.292518 8.173147-6.331195 2.552126-12.56006 3.677762-18.686594 3.677762-14.606673 0-26.961048-5.314029-36.45733-15.929808-9.598612-10.723226-14.394848-26.047236-14.394848-45.859467 0-9.496282 1.220804-18.276249 3.876284-26.14138 2.448772-7.867178 6.024204-14.19735 10.519588-19.307741 4.393054-4.898567 9.700943-8.773827 15.929808-11.33107 6.024204-2.552126 12.764722-3.984754 20.1182-3.984754 10.212596 0 19.095917 2.347464 27.063379 7.14984 7.866155 4.802376 13.889335 11.645225 18.283412 20.936845 4.079922 9.292644 6.331195 20.221554 6.331195 32.883945C462.018144 413.869029 460.790176 422.647973 458.341405 430.310489zM648.700917 574.408375c-2.040473-5.102205-3.77907-9.087982-5.109368-12.150738-1.220804-2.961448-2.858094-5.819542-4.797259-8.582469-1.937119-2.551102-4.393054-4.796236-7.455809-6.53688-3.166109-1.63115-7.04137-2.550079-11.639085-2.550079-4.700045 0-8.480138 0.918929-11.645225 2.550079-3.267417 1.740644-5.614881 3.985778-7.552 6.747681-1.841951 2.654456-3.787256 6.018064-5.417383 10.212596-1.739621 4.079922-3.166109 7.65433-4.290723 10.512425L548.51617 677.150364c-1.732457 4.183276-3.062755 7.553023-3.677762 9.804297-0.818645 2.243087-1.125637 4.489244-1.125637 6.534833 0 3.77293 1.63729 7.354502 4.802376 10.212596s7.04751 4.285606 11.134595 4.285606c4.999874 0 8.472975-1.221828 10.723226-4.183276 2.24411-2.864234 4.797259-8.275477 7.961322-16.242939l7.866155-20.419052 67.096141 0 7.860015 20.1182c0.919952 2.552126 2.24411 5.41022 3.8814 8.576329 1.432629 3.166109 2.865257 5.613858 4.087085 7.252171 1.330298 1.527796 2.75474 2.653433 4.596691 3.676739 1.938142 0.920976 4.183276 1.221828 6.945179 1.221828 4.386914 0 8.268314-1.426489 11.434423-4.490268 3.166109-2.965541 4.802376-6.331195 4.802376-10.211573 0-3.473101-1.738597-9.094122-5.109368-16.850783L648.700917 574.408375zM594.983481 646.710075l24.409946-71.482031 24.812105 71.482031L594.983481 646.710075z"
              fill="#a1afbf"
              p-id="3481"></path>
          </svg>
        </div>
      </div>
      <div
        className={styles['right-content']}
        style={{
          width: showMobileConfig ? '100%' : undefined,
        }}>
        <ImageUpscaleRightContent
          onConfigChange={onConfigChange}
          mobileBack={() => setShowMobileConfig(false)}
        />
      </div>
      <ImageUpscaleFAQ show={showFAQ} onHide={() => setShowFAQ(false)} />
    </div>
  )
}

Page.getLayout = function getLayout(page: React.ReactNode) {
  return (
    <NoneLayout
      title="学图片放大"
      description="一个运行在浏览器环境的图片放大工具">
      {page}
    </NoneLayout>
  )
}
